@paprika/button

@paprika/button - 0.2.20

Description

Button component, for performing an action on the page you’re viewing.

Installation

yarn add @paprika/button

or with npm:

npm install @paprika/button

Props

Button

Prop	Type	required	default	Description
a11yText	string	false	null	Descriptive a11y text for assistive technologies. By default, text from children node will be used.
canPropagate	bool	false	true	If click events are allowed to propagate up the DOM tree.
children	node	false	null	Body content of the button.
icon	node	false	null	An icon to be included to the left of children content.
isActive	bool	false	false	If the button is in an "active" or "selected" state.
isDisabled	bool	false	false	If the button is disabled.
isDropdown	bool	false	false	If the button includes a down arrow to the right of children content.
isFullWidth	bool	false	false	If the width of the button should span it's parent container (100%).
isPending	bool	false	false	If the button should render in a pending state (with a spinner icon).
isSemantic	bool	false	true	If it will be rendered as a element. If false, a will be rendered via an accessible .
isSubmit	bool	false	false	If the type attribute should "submit", instead of the default "button".
kind	Kinds.ALL	false	Kinds.DEFAULT	The visual style of the button.
onClick	func	false	() => {}	Callback to be executed when the button is clicked or activated by keyboard. Typically required.
role	string	false	"button"	Value for role attribute to override the default of "button".
size	ShirtSizes.DEFAULT	false	ShirtSizes.MEDIUM	Size of the button (font size, min-height, padding, etc).
tabIndex	number	false	null	Value for tabindex attribute to override the default of 0.

Usage

Button

The <Button> component is a fully accessible button intended for use typically as a skeuomorphic button, but many visual styles (kinds) are available.

For buttons with a label that is only an icon, the <Button.Icon> component is provided. For typical close buttons, <Button.Close> is provided.

It is rendered as a <button> element by default, but can also be rendered as a generic <span>, via the <RawButton> if global CSS conflicts are an issue (when isSemantic prop is set to false).

Usage

For a basic button

import Button from "@paprika/button";

<Button onClick={clickHandler}>Button label</Button>;

Or a button

import Button from "@paprika/button";
import InfoIcon from "@paprika/icon/lib/InfoCircle";

<Button.Icon onClick={clickHandler}>
  <InfoIcon />
</Button.Icon>;

Or a close button

import Button from "@paprika/button";

<Button.Close onClick={clickHandler} />;

Button.Close

• isDark

more:

• Storybook showcase
• Github source code
• Github create issue
• ChangeLog